import React, { useEffect, useState } from 'react'
import { Tabs, Space, Table, Button, DatePicker, Switch, Dropdown, Form, Row, Input, Select, TimePicker } from 'antd';
import { useSelector, useDispatch ,history } from "umi"
import type { ColumnsType, TableProps } from 'antd/es/table';
const Option: any = Select.Option

type Props = {}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const CouponList = (props: Props) => {

  const [searchDate, setSearchDate] = useState({})
  const [typeDate, setTypeDate] = useState({})
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const marketState = useSelector((state: { marketing: [], marketData: [] }) => {
    //state整个仓库i数据，product是仓库命名空间
    return state.marketing
  })

  useEffect(() => {
    dispatch({
      type: "marketing/query"
    })
  }, [])

  useEffect(() => {
    console.log(searchDate);

    dispatch({
      type: "marketing/query",
      payload: searchDate
    })

  }, [searchDate,typeDate])




  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: '_id',
      key: '_id',
    },
    {
      title: '优惠券名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '优惠券类型',
      dataIndex: 'receiveType',
      key: 'receiveType',
      render: (receiveType) => {
        switch (receiveType) {
          case '1':
            return '手动领取'
            break;
          case '2':
            return '新人券'
            break;
          case '3':
            return '赠送券'
            break;
          case '4':
            return '会员券'
            break;
          case '5':
            return '购买券'
            break;
        }
      }
    },
    {
      title: '面值',
      key: 'price',
      dataIndex: 'price',
    },
    {
      title: '领取日期',
      key: 'create_time',
      dataIndex: 'create_time',
    },
    {
      title: '使用时间',
      key: 'useTime',
      dataIndex: 'useTime',
    },
    {
      title: '是否开启',
      key: 'state',
      dataIndex: 'state',
      render: (state) => {
        return <Space>
          <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
        </Space>
      }
    },
    {
      title: '操作',
      dataIndex: '_id',
      key: 'action',
      render: (_id) => (
        <Space size="middle">
          <a>领取记录</a>
          |
          <a>复制</a>
          |
          <a>删除</a>
        </Space>
      ),
    },
  ];

  const onFinish = (values: any) => {
    console.log("values", values);
    setSearchDate({ ...searchDate,title:values.title  })

  };

  const stateChange = (value: any) => {
    // console.log("state",value);
    if (value == '1') {
      setSearchDate({ ...searchDate, state: Boolean(true) })
    } else {
      setSearchDate({ ...searchDate, state: Boolean(false) })
    }

  }

  const typeChange=(value:any)=>{
    if (value == '0') {
      setTypeDate({receiveType: ''})
      setSearchDate({ ...searchDate, receiveType: '' })
    } else {
      setTypeDate({receiveType: value})
      setSearchDate({ ...searchDate, receiveType: value })
    }

  }

  const goAddConpon=()=>{
    history.push('/home/marketing/addConpon')
  }


  return (
    <>
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
        

      >
        <Row gutter={24} style={{ margin: '0px 0px', width: '60vw', display: 'flex', justifyContent: 'space-between' }}>
          <Form.Item
            name='state'
            label="是否有效"
            // noStyle
            rules={[{ message: 'Province is required' }]}
          >
            <Select placeholder="搜索" style={{ width: '200px' }} onChange={stateChange}>
              <Option value="1">正常</Option>
              <Option value="0">未开启</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name='receiveType'
            label="优惠券类型"
            // noStyle
            rules={[{ message: 'Province is required' }]}
          >
            <Select placeholder="搜索" style={{ width: '200px' }} onChange={typeChange}>
              <Option value="0">全部</Option>
              <Option value="1">手动领取</Option>
              <Option value="2">新人券</Option>
              <Option value="3">赠送券</Option>
              <Option value="4">会员券</Option>
              <Option value="5">购买券</Option>
            </Select>
          </Form.Item>
          <Form.Item style={{margin:'0px'}} name="search" label="搜索" >
            <Input.Group compact>

              <Form.Item
                name='title'
                noStyle
                label="名称"
                rules={[{ message: 'Street is required' }]}
              >
                <Input style={{ width: '200px' }} placeholder="请输入优惠券名称" />
              </Form.Item>
              <Form.Item >
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
              </Form.Item>
            </Input.Group>
          </Form.Item>
        </Row>
      </Form>

      <Button type='primary' style={{margin:'0px 0px 30px'}} onClick={goAddConpon}>添加优惠券 + </Button>


      <Table className='table'
        pagination={{ defaultPageSize: 4 }}
        columns={columns}
        rowKey="_id"
        dataSource={marketState.marketData}
      />
    </>
  )
}

export default CouponList